<template>
    <!-- 修改资料 -->
    <div>
        <el-form label-width="100px" :model="form" label-position="right" ref="formRef" :rules="formRules">
            <el-row>
                <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                    <el-form-item label="功能模块">
                    <sc-table-select v-model="metaModuleList" :inputWidth="600" :apiObj="apiObj"
                            :fileName="metaModuleFileName" :table-width="700" clearable :props="tableProps"
                            @change="moduleChange">
                        </sc-table-select>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                    <el-form-item label="模块ID" prop="moduleId">
                        <el-input v-model="form.moduleId" disabled></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                    <el-form-item label="流程名称">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                    <el-form-item label="单据URL" prop="reviewPageUrl">
                        <el-input v-model="form.reviewPageUrl"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                    <el-form-item label="公司" prop="companyId">
                        <el-select v-model="form.companyId">
                            <el-option v-for="item in configData.companyList" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                    <el-form-item label="工作组" prop="groupId">
                        <el-select v-model="form.groupId">
                            <el-option v-for="item in configData.groupIdList" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                    <el-form-item label="发起人员范围" prop="rangeShowType">
                        <el-select v-model="form.rangeShowType">
                            <el-option v-for="item in configData.rangeShowTypeList" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                    <el-form-item label="管理员" prop="adminId">
                        <ts-select v-if="form.adminName" v-model="form.adminId" :fileName="fileName" :template="tableProps"
                            :label="form.adminName"></ts-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item v-if="form.rangeShowType == '1'" label="发起部门">
                <el-tree-select v-model="form.rangeDeptIdsArray" :data="deptData" multiple show-checkbox collapse-tags
                    :max-collapse-tags="3" :render-after-expand="false" />
            </el-form-item>
            <el-form-item v-if="form.rangeShowType == '2'" label="发起人员">
                <sc-table-select v-model="form.rangeEmployeeList" :inputWidth="600" :apiObj="apiObj" :fileName="fileName"
                    :table-width="700" multiple clearable collapse-tags collapse-tags-tooltip :props="tableProps"
                    :max-collapse-tags="3" @change="change">
                </sc-table-select>
            </el-form-item>
            <el-row>
                <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                    <el-form-item label="绑定表名">
                        <el-input v-model="form.bindTableName"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                    <el-form-item label="审核处理服务名">
                        <el-input v-model="form.approvalHandlerService"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                    <el-form-item label="上传附件" prop="file">
                        <tsUpload @updateFile="updateFile" @removeFile="removeFile"></tsUpload>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                    <el-form-item label="备注">
                        <el-input v-model="form.remark" type="textarea"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <sc-title title="表单控件设置"></sc-title>
            <el-scrollbar height="200px">
                <ts-form-table v-model="dataList" :addTemplate="addTemplate" placeholder="暂无数据">
                    <template #tableContent>
                        <el-table-column prop="id" label="id">
                            <template #default="scope">
                                <el-input v-model="scope.row.id"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="name" label="名称">
                            <template #default="scope">
                                <el-input v-model="scope.row.name"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="fieldName" label="表达式">
                            <template #default="scope">
                                <el-input v-model="scope.row.fieldName"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="控件类型">
                            <template #default="scope">
                                <el-select v-model="scope.row.type">
                                    <el-option v-for="item in configData.componentTypeList" :key="item.value"
                                        :label="item.label" :value="item.value">
                                    </el-option>
                                </el-select>
                            </template>
                        </el-table-column>
                        <el-table-column label="数据源" width="340">
                            <template #default="scope">
                                <ts-select v-model="scope.row.codeKindId" :fileName="codeKindfileName" :input-width="250"
                                    :template="selectProps" @updateRow="codeKindChange(scope.row, $event)"></ts-select>
                            </template>
                        </el-table-column>
                    </template>
                </ts-form-table>
            </el-scrollbar>
        </el-form>
        <div class="button-position" ref="button">
            <el-button @click="updateVisible">取 消</el-button>
            <el-button type="primary" @click="add(formRef)">确 定</el-button>
        </div>
    </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue';
import { Check, Close } from '@element-plus/icons-vue';
import { ElNotification } from 'element-plus';
import Api from '@/api/model/workflow.js'
import sysApi from '@/api/model/system.js'
import tsSelect from '@/components/scSelect/index.vue'
import tsFormTable from '@/components/scFormTable/index.vue'
import tsUpload from '@/components/tsUpload/file.vue'
const emit = defineEmits(['updatetable'])
// 添加用户数据的对象
const form = ref({});
const tableProps = {
    label: 'name',
    value: 'id',
}
const selectProps = {
    label: 'label',
    value: 'value',
}
//tableselect相关属性
const apiObj = ref(sysApi.select.query)
const fileName = ref('ChooseEmployeeReport')
const deptData = ref({})
const configData = ref({})
const formRef = ref()
const formRules = reactive({})
const dataList = ref([])
const addTemplate = ref({
    id: '',
    codeKindId: '',
    type: '',
    name: '',
    fieldName: ''
})
const codeKindfileName = ref('CodeKindTreeReport')
const metaModuleFileName = ref('MetaModuleReport')
const metaModuleList = ref({})
const button = ref(null)
onMounted(() => {
    getInit()
})
const updateFile = (val) => {
    form.value.file = val
}
const removeFile = () => {
    form.value.file = undefined
}
const getInit = async () => {
    var res = await Api.process.add.post();
    if (res.code == 200) {
        configData.value = res.configData
        form.value = res.data
    }
    let params = {
        fileName: 'DeptTreeReport'
    }
    let userRes = await Api.process.deptTree.post(params);
    deptData.value = userRes.reportData
}

const codeKindChange = (prop, val) => {
    prop.codeKindId = val.value
}
const moduleChange = (val) => {
    form.value.metaModuleId = val.id
    form.value.moduleId = val.moduleId
}
const restAddFormData = () => {
    formRef.value.resetFields();
}

const updateVisible = (val) => {
    emit('updatetable')
}



// 上传
const add = async (formRef) => {
    await formRef.validate((valid, fields) => {
        if (valid) {
            addData();
        }
    })
}

const addData = async () => {
    form.value.rangeEmployeeList = form.value.rangeEmployeeList.map((item) => {
        return Object.assign({}, { id: item.id, name: item.name })
    })
    var params = {
        bean: form.value,
        dataList: dataList.value
    }
    var res = await Api.process.saveBaseInfo.post(params);
    if (res.code == 200) {
        restAddFormData()
        ElNotification.success({ title: '', message: '添加成功！', duration: 2000 });
        emit('updatetable', true)
    }
}



</script>

<style lang="less" scoped>
:deep(.el-select) {
    width: 100%;
}
</style>

